<template>
 <section>
  <div class="container">
      <div class="shop-detail">
          <swiper auto height="640px"  dots-position="center">
            <swiper-item class="black" v-for="(bannerlistItem,index) in shopdetail.banners" :key="index">
               <img class="title fadeInUp animated imgbox" :src="bannerlistItem" alt="">
            </swiper-item>
          </swiper>
          <div class="container-title">
            <p class="title-des">
              {{shopText.name}}
            </p>
            <div class="money-box">
              <span class="money">¥{{shopText.discountPrice}}元</span>
              <span class="old-money">¥{{shopText.price}}</span>
            </div>
            <div class="all">
               <span class="express">
                 快递费用：{{shopText.postage}}
               </span>
               <span class="kunc">库存：{{shopText.stock}}</span>
            </div>
          </div>
          <div class="detail">
            <p class="detail-title">图文详情</p>
            <p class="text-de">{{shopdetail.info}}</p>
            <div class="details">
               <div class="imgbox"  v-for="(detailslistItem,index) in shopdetail.details" :key="index">
                  <img class="imgbox" :src="detailslistItem" alt="">
               </div>
            </div>
          </div>
          <div class="footer">
             <div class="box-footer">
                <div class="upold-btn" @click="goUp()">
                  <img src="../assets/shengjihou.png" alt="">
                  <div class="textip" >升级为此产品</div>
                </div>
                <div class="submit" @click="popup()">立即购买</div>
             </div>
          </div>
      </div>
      <div>
            <popup v-model="popupShow">
                <div class="popup1">
                    <i class="fa fa-close"></i>
                    <div class="product-info">
                        <div class="img">
                          <img :src="shopText.logo" alt="">
                        </div>
                        <div class="right">
                            <div class="price">价格：￥{{price}}</div>
                        </div>
                    </div>
                    <div class="pro-color" v-for="(propertyListItem,bb) in propertyList" :key="bb">
                        <div class="title">{{propertyListItem.name}}</div>
                        <div class="color-list" >
                            <div class="item vux-1px" @click="getnum(fromatItem.id,indexs,bb,propertyListItem.id)"  
                            v-for="(fromatItem,indexs) in fromat[propertyListItem.id]"  :key="indexs" 
                            :class="{'active':indexs ==idx[bb]}"
                            >{{ fromatItem.name}}</div>
                        </div>
                    </div>
                    <div class="number">库存：{{stock}}</div>
                    <div class="btn" @click="goBuy">确定</div>
                </div>
            </popup>
        </div>
  </div>
</section>
</template>
<script>
import { SwiperItem,Swiper,Popup,XNumber} from 'vux'
export default {
    components:{
      SwiperItem,
      Swiper,
      Popup,
      XNumber 
    },
     data () {
	    return {
         changeValue:0,
         shopdetail:{},
         shopText:{},
         idx:[],
         checktext:"请选择尺码",
         popupShow:false,
         labelIds:'',
         act:false,
         inds:0,
         stock:'',  //库存
         price:"",   //尺码价格
         propertyList:[],
         fromat:[],
         fromatOne:[],
         lengths:0,
         jsApiParameters:'',
         orderId:'',
         b:false
	     }
     },
     mounted(){
       this.getShopInformation()
       this.getproperty()  //获取属性
       
     },
    methods:{
      goUp(){
          var self=this
         if(this.$route.query.oldshopNumber){
            //this.$router.push({path:"/Lottery",query:{ userId:self.$route.query.userId,orderNumber:self.$route.query.oldshopNumber }})
             this.popupShow = true;
       }
      },
      jsApiCall()
            {
              let _this=this
              WeixinJSBridge.invoke(
                    'getBrandWCPayRequest',
                    this.jsApiParameters,
                    function(res){
                        WeixinJSBridge.log(res.err_msg);
                       
                        if(res.err_msg == "get_brand_wcpay_request:ok"){
                       // alert(res.err_code+res.err_desc+res.err_msg);
                       // _this.$router.push({ path:'/Order'})
                        window.location.href="http://www.chenyekeji.com/pinShangShop/#/Order?order="+_this.orderId;
                    }else{
                        //返回跳转到订单详情页面
                        alert(支付失败);
                            
                    }
                    }
                );
            },
            callpay()
            {
                if (typeof WeixinJSBridge == "undefined"){
                    if( document.addEventListener ){
                        document.addEventListener('WeixinJSBridgeReady', this.jsApiCall, false);
                    }else if (document.attachEvent){
                        document.attachEvent('WeixinJSBridgeReady', this.jsApiCall); 
                        document.attachEvent('onWeixinJSBridgeReady', this.jsApiCall);
                    }
                }else{
                   this.jsApiCall();
                }
            },
      goBuy(){   //支付
        var self=this
         let data={
            id:this.$route.query.oldshopNumber,
            updateText: self.labelIds
         }
        //  this.$axios.post('/device/pay/prepayment/',data).then(res=>{
        //     if(res.data.code==1000){
        //       // console.log(res)
        //       // alert("12")
        //       this.jsApiParameters=res.data.data.finalpackage
        //        this.callpay()

        //     }
                
        //   })

       if(self.b){
           self.b=true
         }else{
        this.$axios.post('/device/order/update',data).then(res=>{
            if(res.data.code==1000){
              console.log(res)
              this.$vux.toast.text('去升级')
                this.$router.push({path:"/Lottery",query:{ userId:self.$route.query.userId,orderNumber:self.$route.query.oldshopNumber }})
            
            }
                
          })
         }
      },
       popup (){
          this.popupShow = true;
        },
       getproperty(){   
          let self=this  
          this.$axios.post('/device/property/enableList/'+this.$route.query.shopId).then(res=>{
            if(res.data.code==1000){
               self.propertyList=res.data.data
               for(let i=0;i<self.propertyList.length;i++){
                  self.getformat(self.propertyList[i].id,i)
               }
            }
                
          })
      
      },
     getformat(id,i){    //规格    
        let self=this
        new Promise(function (resolve, reject) {
         
            self.$axios.post('/device/propertyLabel/showList/'+id).then(res=>{
                  if(res.data.code==1000){
                    self.lengths+=1
                    self.fromat[id]=self.fromat.concat(res.data.data)  //查出规格拼接
                    //self.labelIds+=self.fromat[id][0].id    //id
                    
                    resolve(self.lengths);
                  }
              })
          }).then(function (lengths){
            // if(lengths==self.propertyList.length){    //进来不执行函数
            //   self.getnum()
            // } 
        })
        
        
      },
      getnum(id,indexs,bb,bid){   //库存  
       let self=this
          this.idx[bb] = indexs
          this.idx = this.idx.concat([])  //一个新的数组不改变原新的数组
          this.getcheck(id,indexs,bb,bid)    //id颜色的id
      },
      getcheck(id,indexs,bb,bid){
          var self=this
          this.checktext=""
          var formatlist=self.fromat[self.propertyList[bb].id]   //获取分类的列表
          for(let iq=0;iq<formatlist.length;iq++){ 
             if( formatlist[iq].checkout==true){
               formatlist[iq].checkout=false
             }
               
           }
           self.fromat[self.propertyList[bb].id][indexs].checkout=true  //选中
              
           self.getId(id,indexs,bb,bid)
      },
      getId(id,indexs,bb,bid){
        var self=this
        self.labelIds=""
          for(let i=0;i<self.propertyList.length;i++){
             for(let iq=0;iq<self.fromat[self.propertyList[i].id].length;iq++){ 
               if( self.fromat[self.propertyList[i].id][iq].checkout==true){
                   self.labelIds+=self.fromat[self.propertyList[i].id][iq].name+" "
                }
            }
          }
          if(self.propertyList.length>1){
            
            if(self.labelIds.length>32){
              self.getNumber()
          }
          }else{
              self.getNumber()
          }
      },
      getNumber(){   //获取库存
          var self=this
       console.log(self.labelIds)
          this.$axios.post('/device/subProduct/get/'+this.$route.query.shopId+"/"+self.labelIds).then(res=>{
             if(res.data.code==1000){
              
                 this.price=res.data.data.price
                 this.stock=res.data.data.stock
               }
             })
          
      },
      getShopInformation(){
        let self=this
         this.$axios.post('device/productDetail/get/'+this.$route.query.shopId).then(res=>{
            if(res.data.code==1000){
              this.shopdetail = res.data.data
               
            }
          })
         this.$axios.post('device/product/get/'+this.$route.query.shopId).then(res=>{
          if(res.data.code==1000){
              this.shopText = res.data.data
              self.price=self.shopText.discountPrice
              self.stock=self.shopText.stock
          }
        })
      },
    }
}
</script>

<style lang="less" scoped>
.popup1 {
        position: relative;
        background-color: #fff;
        text-align: left;
        .number{
              padding: 0 30px;
              font-size: 26px;
        }
        .fa-close {
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 150%;
        }
        .product-info {
            padding: 34px 0 0 25px;
            align-items: center;
            margin-bottom: 40px;
            .img {width: 170px;height: 170px;
                img {width: 100%;height: 100%;}
            }
            display: flex;
            .right {
                margin-left: 37px;
                .price {
                    font-size: 30px;
                    color: #222;
                }
                .select {
                    font-size: 28px;
                    color: #888888; 
                }
            }

        }
        .pro-color {
            padding-left: 25px;
            .title { font-size: 30px; color: #444; margin-bottom: 25px;}
            &.pro-size { margin-top: 32px; }
            .color-list {
                display: flex;
                flex-wrap: wrap;
                .item {
                    line-height: 57px;
                    text-align: center;
                    height: 57px;
                    min-width: 143px;
                    margin-bottom: 25px;
                    font-size: 26px;
                    color: #444;
                    margin-right: 30px;
                    box-sizing: border-box;
                    padding: 0 20px;
                    &.vux-1px:before {
                        border:1px solid #444;
                    }
                    &.active {
                        color: #fe4543;
                        border-color: #fe4543;
                        &.vux-1px:before {
                            border:1px solid #fe4543;
                        }
                    }
                }
            }
        }
        .btn {
            width: 100%;
            margin-top: 81px;
            height: 93px;
            line-height: 93px;
            text-align: center;
            font-size: 26px;
            background-color: #FB4749;
            color: #fff;
        }
    }
.upold-btn{
  text-align: center;
  color:#c7c7c7;
  font-size: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  img{
    height: 30px;
    width: 30px;
  }
}
.footer{
  position:fixed;
  left:0;
  bottom:0;
  z-index: 10;
  height:100px;
  width:100%;
}
.submit{
  flex:0 0 66%;
   line-height: 100px;
   text-align:center;
   color: #fff;
   display: none;
   font-size: 32px;
   background: #ffab27;
   
}
.upold-btn{
     -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
        background: #fdba0c;
    color: #fff;
}
.box-footer{
  display: flex;
  width:100%;
  background: #fff;
  height: 100px;
  border-top:1px solid #c7c7c7;
}
.textip{
  padding-top:4px;
}
.container{
  padding-bottom:100px;
}
.text-de{
  font-size: 24px;
  text-align: left;
}
.detail-title{
  font-size: 40px;
  color: #444444;
  line-height: 90px;
  text-align: left;
}
.detail{
  padding:0 30px;
  padding-bottom: 100px;
}
.kunc{
  font-size: 30px;
  color: #999999;
  float: right;
}
.all{
  padding-bottom:20px;
}
.express{
  font-size: 30px;
  color: #999999;
}
.container-title{
     padding:0 30px;
     border-bottom: 2px solid #cacaca;
     text-align: left;
}
.title-des{
  font-size: 36px;
  color: #666666;
  line-height: 82px;
  text-align: left;
}
.money-box{
  line-height: 70px;
  .money{
    font-size: 44px;
    color: #ff2b2b;
  }
  .old-money{
    font-size: 28px;
    color: #999999;
    text-decoration:line-through;
    padding-left:34px;
  }
}
.imgbox{
  width: 100%;
  min-height: 100%;
}
.title{
    height: 80px;
    line-height: 80px;
    color: #222222;
    font-size: 28px;
}
   .animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.vux-indicator.custom-bottom {
  bottom: 30px;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}
.swiper-demo-img img {
  width: 100%;
}
</style>
